<!DOCTYPE html>

<head></head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    .div_1 {
        width: 120px;
        height: 30px;
        background-color: #c8c8c8;
        border: 1px solid #a0a0a0;
        color: white;
        border-radius: 25px;
        position: relative;
        float: left;
        margin-right: 10px;
        margin-top: 5px;
        cursor: pointer;
    }

    .w_140 {
        width: 170px;
    }

    .div_2 {
        position: absolute;
        margin-top: 3px;
        margin-left: 6px;
    }

    .div_3 {
        width: 25px;
        height: 25px;
        background-color: #fff;
        border-radius: 25px;
        margin-left: 92px;
        position: absolute;
        margin-top: 2px;
        color: black;
        line-height: 25px;
        text-align: center;
    }
</style>


<body>

    <div id="test" style="width: 1042px;">

    </div>
    <div hidden id="text"></div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script>
        abc();
        function abc() {
            var array = ['Pathology', 'ECG', 'Blood', 'Urine', 'X-Ray', 'MRI', 'CT', 'USG', 'Histology', 'Hospital', 'Clinic Document', 'Dleodiskukd', 'Dkksksk Dkkddkk Ckkkdmmwl', 'Clsjfhejfb Slslamd Dkjfoejfmjmj'];
            var html = '';
             for (var i = 0; i < array.length; i++) {
                    $("#text").empty();
                    $("#text").append(array[i]);
                    var w =  $("#text").innerWidth();
                    html += '<div class="div_1" style="width: ' + (w + 40) + 'px;" onclick="checkType(this)" onselectstart="return false"><div class="div_2">' + array[i] + '</div><div class="div_3" style="margin-left: ' + (w + 12) + 'px;">10</div></div>';
               
            }
            $("#test").append(html);
        }

        function checkType(obj) {
            var tempColor = 'rgb(240, 240, 240)';
            var checkColor = $(obj).css("background-color");
            if (checkColor == tempColor) {
                $(obj).css("background-color", "#c8c8c8");
                $(obj).css("color", "white");
                $(obj).find("div[class='div_3']").css("background-color", "white");
                $(obj).find("div[class='div_3']").css("color", "black");
            } else {
                $(obj).css("background-color", tempColor);
                $(obj).css("color", "black");
                $(obj).find("div[class='div_3']").css("background-color", checkColor);
                $(obj).find("div[class='div_3']").css("color", "white");
            }
        }
    </script>
</body>

</html>